<template>
  <div>
        <van-popup v-model="showPicker2" :style="{ height: '100%' }" :overlay="false" position="bottom">
            <div class="custom-area flex items-center">
                <span class="zdy">自定义利率:</span>
                <input type="number" class="ipt-text" v-model="zdyRate" placeholder="请输入利率" /> 
                <span class="gray-8">%</span>
                <div class="btn" @click="okRate">确定</div>
            </div>
            <div class="choose-rate">
                <div class="tips">或者选择常用利率</div>
                <ul>
                    <li
                    class="rate-item"
                    v-for="(item, index) in rateList"
                    :key="index"
                    @click="chooseRate(index)"
                    :class="{'on': index == currRateIndex}"
                    >
                        {{item.desc}}{{index == 0 || index == 1?'': item.name}}
                    </li>
                </ul>
            </div>
        </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    props:['rateList', 'finalRate'],
  data() {
      return{
          showPicker2: true,
          currRateIndex: 0,
          finalRate1: 0,
          currRate: 0,
          zdyRate: null
      } 
  },
  methods:{
       //  选择利率
    chooseRate(index){
        this.currRateIndex = index;
        this.currRate = `${this.rateList[index].key}%`;
        this.finalRate1 = this.rateList[index].key;
        this.$emit("choosed", this.finalRate1)
    },
    //  自定义利率
    okRate(){       
        if(this.zdyRate){
            this.finalRate1 = this.zdyRate;
            this.currRate = `${this.zdyRate}%`;
            this.currRateIndex = 99;
            this.$emit("choosed", this.finalRate1)
        }else{
            Toast('请填写利率');
        }
        
    },
  }
}
</script>

<style lang="scss" scoped>
 .custom-area{
        width: 100%;
        font-size: 15px;
        overflow: hidden;
        padding: 2vh 20px 8px 0;
        justify-content: space-between;
        .zdy{
            margin-left: 6vw;
        }
        .ipt-text{
            width: 25vw;
        }
        .btn{
            width: 15vw;
            height: 4vh;
            line-height: 4vh;
            border: none;
            font-size: 14px;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            background-color: #4687f2;     
        }
    }
    .choose-rate{
        .tips{
            font-size: 12px;
            color: #83868f;
            line-height: 5vh;
            background: #fafafa;
            padding: 0 6vw;
            background-color: #eee;
        }
        ul li{
            padding: 0 6vw;
            line-height: 8vh;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        li.on:after {
            content: '';
            position: absolute;
            width: 6vw;
            height: 3vh;
            right: 3vw;
            top: 50%;
            margin-top: -1.5vh;
            background: url(../assets/ok.png) no-repeat;
            background-size: 17px auto;
            }
    }
</style>